<template>
  <div class="layout-container">
    <SideMenu
      :items="menuItems"
      :active-index="activeIndex"
      @select="handleSelect"
    />
    <div class="main-content">
      <span
        style="color: rgb(0, 174, 255)"
        v-if="
          !router.currentRoute.value.path.includes('/learning/simulator') &&
          !router.currentRoute.value.path.includes('learning/listening')
        "
        ><span style="color: black">当前章节</span>：{{ selectValue }}</span
      >
      <router-view :key="$route.fullPath" />
    </div>
  </div>
</template>

<script setup>
import SideMenu from "@/components/SideMenu.vue";
import lastRecord from "@/api/record/lastRecord";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import seftTestApi from "@/api/selfTest/index";
import { ref, onMounted, computed } from "vue";
import { getToken } from "@/utils/auth"; // get token from cookie

const router = useRouter();
const store = useStore();
const activeIndex = ref("预览题目");

const menuItems = [
  { index: "预览题目", icon: "HomeFilled", title: "预览题目" },
  { index: "顺序练习", icon: "Stamp", title: "顺序练习" },
  { index: "随机练习", icon: "Refresh", title: "随机练习" },
  { index: "错题练习", icon: "Warning", title: "错题练习" },
  { index: "收藏练习", icon: "Star", title: "收藏练习" },
  { index: "自我测试", icon: "Timer", title: "自我测试" },
  { index: "回顾试卷", icon: "DocumentCopy", title: "回顾试卷" },
  { index: "模拟器", icon: "SwitchFilled", title: "模拟器" },
  { index: "英语听力", icon: "Microphone", title: "英语听力" },
];

const handleSelect = async (index) => {
  console.log(index);

  if (index === "预览题目") {
    router.push("/learning/index");
  } else if (index === "自我测试") {
    if (!store.getters.selectedId) {
      ElMessage.error("请先选择科目！");
      return;
    }
    //出现一个对话框，要求用户设置试卷数量
    ElMessageBox.prompt("请设置试卷数量", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      cancelButtonColor: "green",
    }).then(async ({ value }) => {
      const res = await seftTestApi.batchInsert(
        store.getters.selectedId,
        value
      );
      router.push({
        path: "/learning/selfTest",
        query: {
          questionItemId: res.data,
          type: "selfTest",
        },
      });
    });
  } else if (index === "回顾试卷") {
    router.push({
      path: "/learning/review",
      query: {
        selectedId: store.getters.selectedId,
        type: index,
      },
    });
  } else if (index === "模拟器") {
    router.push({
      path: "/learning/simulator",
    });
  } else if (index === "英语听力") {
    router.push({
      path: "/learning/listening",
    });
  } else {
    router.push({
      path: "/learning/learn",
      query: { type: index, selectedId: store.getters.selectedId },
    });
  }
};

const selectValue = computed(() => {
  return store.getters.selectValue;
});

const getLastRecord = async () => {
  if (!store.getters.selectValue || !store.getters.selectedId) {
    const res = await lastRecord.getLastRecord();
    if (res.data) {
      store.dispatch("learn/setSelectValue", res.data.chatperName);
      store.dispatch("learn/setSelectedId", res.data.selectedId);
    }
  }
};

onMounted(() => {
  // Set active menu item based on route path and query
  const routePath = router.currentRoute.value.path;
  const routeType = router.currentRoute.value.query.type;

  if (routeType && routePath !== "/learning/selfTest") {
    activeIndex.value = routeType;
  } else if (routePath === "/learning/review") {
    activeIndex.value = "回顾试卷";
  } else if (routePath === "/learning/index") {
    activeIndex.value = "预览题目";
  } else if (routePath === "/learning/selfTest") {
    activeIndex.value = "自我测试";
  } else if (routePath.includes("/learning/simulator")) {
    activeIndex.value = "模拟器";
  } else if (routePath.includes("/learning/listening")) {
    activeIndex.value = "英语听力";
  }

  if (getToken()) {
    getLastRecord();
  }
});
</script>

<style scoped>
.layout-container {
  border: solid 1px rgb(226, 226, 226);
  display: flex;
  min-height: 80vh;
}

.main-content {
  background-color: rgb(245, 245, 245);
  flex: 1;
  padding-top: 20px;
  padding-left: 20px;
  overflow-y: auto;
}
</style>
